<!doctype html>
<html lang="en">
<head>
    <title>Grid - Paging</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="wijgrid provides paging" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/Aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.0.8.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.ui.wijpager.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.ui.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.0.8.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijpager.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                allowPaging: true,
                pageSize: 5,
                pagerSettings: { position: "topAndBottom" }
            });

            $("#pagerPosition").change(function (e) {
                var pagerSettings = $.extend({}, $("#demo").wijgrid("option", "pagerSettings"));
                pagerSettings.position = $(e.target).val();
                $("#demo").wijgrid("option", "pagerSettings", pagerSettings);
            });

            $("#pagerMode").bind("change", function (e) {
                var pagerSettings = $.extend({}, $("#demo").wijgrid("option", "pagerSettings"));
                pagerSettings.mode = $(e.target).val();
                $("#demo").wijgrid("option", "pagerSettings", pagerSettings);
            });

            $("#pageSize").bind("change", function (e) {
                $("#demo").wijgrid("option", "pageSize", parseInt($(e.target).val()));
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Paging</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table id="demo">
                <thead>
                    <tr>
                        <th>
                            OrderID
                        </th>
                        <th>
                            ProductID
                        </th>
                        <th>
                            UnitPrice
                        </th>
                        <th>
                            Quantity
                        </th>
                        <th>
                            Discount
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            10248
                        </td>
                        <td>
                            11
                        </td>
                        <td>
                            14
                        </td>
                        <td>
                            12
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10248
                        </td>
                        <td>
                            42
                        </td>
                        <td>
                            9,8
                        </td>
                        <td>
                            10
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10248
                        </td>
                        <td>
                            72
                        </td>
                        <td>
                            34,8
                        </td>
                        <td>
                            5
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10249
                        </td>
                        <td>
                            14
                        </td>
                        <td>
                            18,6
                        </td>
                        <td>
                            9
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10249
                        </td>
                        <td>
                            51
                        </td>
                        <td>
                            42,4
                        </td>
                        <td>
                            40
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10250
                        </td>
                        <td>
                            41
                        </td>
                        <td>
                            7,7
                        </td>
                        <td>
                            10
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10250
                        </td>
                        <td>
                            51
                        </td>
                        <td>
                            42,4
                        </td>
                        <td>
                            35
                        </td>
                        <td>
                            0,15
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10250
                        </td>
                        <td>
                            65
                        </td>
                        <td>
                            16,8
                        </td>
                        <td>
                            15
                        </td>
                        <td>
                            0,15
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10251
                        </td>
                        <td>
                            22
                        </td>
                        <td>
                            16,8
                        </td>
                        <td>
                            6
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10251
                        </td>
                        <td>
                            57
                        </td>
                        <td>
                            15,6
                        </td>
                        <td>
                            15
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10251
                        </td>
                        <td>
                            65
                        </td>
                        <td>
                            16,8
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10252
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            64,8
                        </td>
                        <td>
                            40
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10252
                        </td>
                        <td>
                            33
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            25
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10252
                        </td>
                        <td>
                            60
                        </td>
                        <td>
                            27,2
                        </td>
                        <td>
                            40
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10253
                        </td>
                        <td>
                            31
                        </td>
                        <td>
                            10
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10253
                        </td>
                        <td>
                            39
                        </td>
                        <td>
                            14,4
                        </td>
                        <td>
                            42
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10253
                        </td>
                        <td>
                            49
                        </td>
                        <td>
                            16
                        </td>
                        <td>
                            40
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10254
                        </td>
                        <td>
                            24
                        </td>
                        <td>
                            3,6
                        </td>
                        <td>
                            15
                        </td>
                        <td>
                            0,15
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10254
                        </td>
                        <td>
                            55
                        </td>
                        <td>
                            19,2
                        </td>
                        <td>
                            21
                        </td>
                        <td>
                            0,15
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10254
                        </td>
                        <td>
                            74
                        </td>
                        <td>
                            8
                        </td>
                        <td>
                            21
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10255
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            15,2
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10255
                        </td>
                        <td>
                            16
                        </td>
                        <td>
                            13,9
                        </td>
                        <td>
                            35
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10255
                        </td>
                        <td>
                            36
                        </td>
                        <td>
                            15,2
                        </td>
                        <td>
                            25
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10255
                        </td>
                        <td>
                            59
                        </td>
                        <td>
                            44
                        </td>
                        <td>
                            30
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10256
                        </td>
                        <td>
                            53
                        </td>
                        <td>
                            26,2
                        </td>
                        <td>
                            15
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10256
                        </td>
                        <td>
                            77
                        </td>
                        <td>
                            10,4
                        </td>
                        <td>
                            12
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10257
                        </td>
                        <td>
                            27
                        </td>
                        <td>
                            35,1
                        </td>
                        <td>
                            25
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10257
                        </td>
                        <td>
                            39
                        </td>
                        <td>
                            14,4
                        </td>
                        <td>
                            6
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10257
                        </td>
                        <td>
                            77
                        </td>
                        <td>
                            10,4
                        </td>
                        <td>
                            15
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10258
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            15,2
                        </td>
                        <td>
                            50
                        </td>
                        <td>
                            0,2
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10258
                        </td>
                        <td>
                            5
                        </td>
                        <td>
                            17
                        </td>
                        <td>
                            65
                        </td>
                        <td>
                            0,2
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10258
                        </td>
                        <td>
                            32
                        </td>
                        <td>
                            25,6
                        </td>
                        <td>
                            6
                        </td>
                        <td>
                            0,2
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10259
                        </td>
                        <td>
                            21
                        </td>
                        <td>
                            8
                        </td>
                        <td>
                            10
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10259
                        </td>
                        <td>
                            37
                        </td>
                        <td>
                            20,8
                        </td>
                        <td>
                            1
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10260
                        </td>
                        <td>
                            41
                        </td>
                        <td>
                            7,7
                        </td>
                        <td>
                            16
                        </td>
                        <td>
                            0,25
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10260
                        </td>
                        <td>
                            57
                        </td>
                        <td>
                            15,6
                        </td>
                        <td>
                            50
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10260
                        </td>
                        <td>
                            62
                        </td>
                        <td>
                            39,4
                        </td>
                        <td>
                            15
                        </td>
                        <td>
                            0,25
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10260
                        </td>
                        <td>
                            70
                        </td>
                        <td>
                            12
                        </td>
                        <td>
                            21
                        </td>
                        <td>
                            0,25
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10261
                        </td>
                        <td>
                            21
                        </td>
                        <td>
                            8
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10261
                        </td>
                        <td>
                            35
                        </td>
                        <td>
                            14,4
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10262
                        </td>
                        <td>
                            5
                        </td>
                        <td>
                            17
                        </td>
                        <td>
                            12
                        </td>
                        <td>
                            0,2
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10262
                        </td>
                        <td>
                            7
                        </td>
                        <td>
                            24
                        </td>
                        <td>
                            15
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10262
                        </td>
                        <td>
                            56
                        </td>
                        <td>
                            30,4
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10263
                        </td>
                        <td>
                            16
                        </td>
                        <td>
                            13,9
                        </td>
                        <td>
                            60
                        </td>
                        <td>
                            0,25
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10263
                        </td>
                        <td>
                            24
                        </td>
                        <td>
                            3,6
                        </td>
                        <td>
                            28
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10263
                        </td>
                        <td>
                            30
                        </td>
                        <td>
                            20,7
                        </td>
                        <td>
                            60
                        </td>
                        <td>
                            0,25
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10263
                        </td>
                        <td>
                            74
                        </td>
                        <td>
                            8
                        </td>
                        <td>
                            36
                        </td>
                        <td>
                            0,25
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10264
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            15,2
                        </td>
                        <td>
                            35
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10264
                        </td>
                        <td>
                            41
                        </td>
                        <td>
                            7,7
                        </td>
                        <td>
                            25
                        </td>
                        <td>
                            0,15
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10265
                        </td>
                        <td>
                            17
                        </td>
                        <td>
                            31,2
                        </td>
                        <td>
                            30
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10265
                        </td>
                        <td>
                            70
                        </td>
                        <td>
                            12
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10266
                        </td>
                        <td>
                            12
                        </td>
                        <td>
                            30,4
                        </td>
                        <td>
                            12
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10267
                        </td>
                        <td>
                            40
                        </td>
                        <td>
                            14,7
                        </td>
                        <td>
                            50
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10267
                        </td>
                        <td>
                            59
                        </td>
                        <td>
                            44
                        </td>
                        <td>
                            70
                        </td>
                        <td>
                            0,15
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10267
                        </td>
                        <td>
                            76
                        </td>
                        <td>
                            14,4
                        </td>
                        <td>
                            15
                        </td>
                        <td>
                            0,15
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10268
                        </td>
                        <td>
                            29
                        </td>
                        <td>
                            99
                        </td>
                        <td>
                            10
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10268
                        </td>
                        <td>
                            72
                        </td>
                        <td>
                            27,8
                        </td>
                        <td>
                            4
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10269
                        </td>
                        <td>
                            33
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            60
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10269
                        </td>
                        <td>
                            72
                        </td>
                        <td>
                            27,8
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10270
                        </td>
                        <td>
                            36
                        </td>
                        <td>
                            15,2
                        </td>
                        <td>
                            30
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10270
                        </td>
                        <td>
                            43
                        </td>
                        <td>
                            36,8
                        </td>
                        <td>
                            25
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10271
                        </td>
                        <td>
                            33
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            24
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10272
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            64,8
                        </td>
                        <td>
                            6
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10272
                        </td>
                        <td>
                            31
                        </td>
                        <td>
                            10
                        </td>
                        <td>
                            40
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10272
                        </td>
                        <td>
                            72
                        </td>
                        <td>
                            27,8
                        </td>
                        <td>
                            24
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10273
                        </td>
                        <td>
                            10
                        </td>
                        <td>
                            24,8
                        </td>
                        <td>
                            24
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10273
                        </td>
                        <td>
                            31
                        </td>
                        <td>
                            10
                        </td>
                        <td>
                            15
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10273
                        </td>
                        <td>
                            33
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            20
                        </td>
                        <td>
                            0
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10273
                        </td>
                        <td>
                            40
                        </td>
                        <td>
                            14,7
                        </td>
                        <td>
                            60
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                    <tr>
                        <td>
                            10273
                        </td>
                        <td>
                            76
                        </td>
                        <td>
                            14,4
                        </td>
                        <td>
                            33
                        </td>
                        <td>
                            0,05
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <div class="option-row">
                    <label for="pagerPosition">
                        Position</label>
                    <select id="pagerPosition">
                        <option>bottom</option>
                        <option>top</option>
                        <option>topAndBottom</option>
                    </select>
                </div>
                <div class="option-row">
                    <label for="pagerMode">
                        Mode</label>
                    <select id="pagerMode">
                        <option>nextPrevious</option>
                        <option>nextPreviousFirstLast</option>
                        <option>numeric</option>
                        <option>numericFirstLast</option>
                    </select></div>
                <div class="option-row">
                    <label for="pageSize">
                        Page size</label>
                    <select id="pageSize">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option selected="true">5</option>
                        <option>10</option>
                        <option>25</option>
                        <option>50</option>
                        <option>100</option>
                    </select>
                </div>
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
            </p>
        </div>
    </div>
</body>
</html>
